<template>
  <Drawer
    closeIcon=""
    :maskClosable="true"
    :closable="true"
    :width="720"
    :destroyOnClose="true"
    v-model:visible="visible"
    :title="props.operation === 'update' ? '编辑应用' : '上架应用'"
    @close="resetFields()"
  >
    <BasicForm @register="registerForm">
      <template #edit>
        <Button v-if="isEditable" @click="editSecret()" class="ml-[20px]" type="primary">修改</Button>
      </template>
    </BasicForm>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <Button @click="closeDrawer()" class="mr-[10px]">取消</Button>
      <Button type="primary" @click="handleSubmit">提交</Button>
    </div>
  </Drawer>
</template>

<script lang="ts" setup>
/* eslint-disable */
import BasicForm from '/@/components/BasicForm/BasicForm.vue';
import { useBasicForm } from '/@/components/BasicForm/hooks/useBasicForm';
import { useMessage } from '/@/hooks/web/useMessage';
import { addOrUpdateApp, getDetail } from '/@/api/system-mgmt/app-mgmt/app';
import { Drawer, Button, InputPassword } from 'ant-design-vue';
import { nextTick, ref } from 'vue';
import { detailSchemas } from '/@/views/system-mgmt/app-mgmt/drawer/detailSchema.data';
import { createSchema } from '/@/views/system-mgmt/app-mgmt/drawer/data';

const props = defineProps(['appId', 'operation']);
const visible = ref(false);
const isEditable = ref(true);
const emits = defineEmits(['close', 'success']);

const { createMessage } = useMessage();
const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useBasicForm({
  schemas: detailSchemas,
  showActionButtonGroup: false,
  labelWidth: 120,
});

const isAppSubscribed = (isSubscribed?: number | undefined) => {
  if (isSubscribed && isSubscribed === 1) {
    return true;
  }
  if (isSubscribed && isSubscribed === 0) {
    return false;
  } else {
    return false;
  }
};

const openDrawer = async (isSubscribed?: number | undefined) => {
  visible.value = true;

  nextTick(async () => {
    await updateSchema(createSchema);
    setFieldsValue({ ifIntegrateThirdApp: false, ifIntegrateCm: false });
    if (props.operation === 'update') {
      if (isSubscribed && isSubscribed === 1) {
        isEditable.value = false;
      } else {
        isEditable.value = true;
      }
      await updateSchema([
        {
          field: 'nameEn',
          dynamicDisabled: isAppSubscribed(isSubscribed),
        },
        {
          field: 'architecture',
          dynamicDisabled: isAppSubscribed(isSubscribed),
        },
        {
          field: 'architecture',
          dynamicDisabled: isAppSubscribed(isSubscribed),
        },
        {
          field: 'idaasAppId',
          dynamicDisabled: isAppSubscribed(isSubscribed),
          componentProps: {
            visibilityToggle: false,
          },
          colProps: { span: 21 },
        },
        {
          field: 'idaasClientId',
          dynamicDisabled: isAppSubscribed(isSubscribed),
          componentProps: {
            visibilityToggle: false,
          },
          colProps: { span: 21 },
        },
        {
          field: 'idaasClientSecret',
          dynamicDisabled: true,
          componentProps: {
            placeHolder: '请输入idaas Client Secret',
            visibilityToggle: false,
          },
          colProps: { span: 21 },
        },
        {
          field: 'domain',
          dynamicDisabled: isAppSubscribed(isSubscribed),
          componentProps: {
            visibilityToggle: false,
          },
          colProps: { span: 21 },
        },
        {
          field: 'editSecret',
          show: true,
          colProps: { span: 3 },
        },
      ]);
    } else {
      await updateSchema([
        {
          field: 'idaasClientSecret',
          dynamicDisabled: false,
          colProps: { span: 21 },
        },
        {
          field: 'editSecret',
          show: false,
        },
      ]);
    }
  });
};
const closeDrawer = () => {
  resetFields();
  visible.value = false;
};

const upgradeApp = async (isSubscribed?: number | undefined) => {
  openDrawer(isSubscribed);
  try {
    const appInfo = await getDetail({ id: props.appId });
    if (appInfo.architecture === '微服务') {
      nextTick(async () => {
        await updateSchema({
          field: 'ifIntegrateThirdApp',
          dynamicDisabled: true,
        });
      });
    }
    await setFieldsValue(appInfo);
  } catch (err) {
    createMessage.error(err);
  }
};

const editSecret = () => {
  updateSchema({
    field: 'idaasClientSecret',
    dynamicDisabled: false,
    componentProps: {
      placeHolder: '请输入idaas Client Secret',
      visibilityToggle: true,
    },
  });
};

async function handleSubmit() {
  try {
    const values = await validate();
    if (props.operation === 'update') {
      values.id = props.appId;
    }
    const res = await addOrUpdateApp(values);

    if (res === '操作成功') {
      createMessage.success('应用新增/编辑成功！');
      resetFields();
      closeDrawer();
      emits('success');
    } else {
      createMessage.error('应用新增/编辑失败！');
    }
  } catch (error) {
    createMessage.error(error.response.data.msg);
  }
}

defineExpose({ openDrawer, closeDrawer, upgradeApp });
</script>

<style lang="less" scoped></style>
